<template>
  <view class="flex-col page group">
    <view class="flex-col section_card">
      <view class="flex-row items-center">
        <image class="icon_explain" src="/static/icon/notice_pink.svg" />
        <text class="font_explain ml-5">说明：</text>
      </view>
      <text class="font mt-7">
        感谢您完成本次内在能力方面的筛查问卷，以下是您在认知、运动、营养、视力、听力、心理状况维度的详细结果。
      </text>
    </view>
    <view class="flex-col section_card view_2 mt-8">
      <Loader :loading="loading">
        <echarts :option="option" height="500rpx"></echarts>
        <view class="mt-4 flex-col list">
          <view class="flex-row justify-between items-center mt-8 list-item" v-for="(item, index) in scResults"
            :key="index">
            <view class="flex-row items-center">
              <image class="image_9" :src="item.iconUrl" />
              <text class="font_explain ml-7">{{ item.name }}</text>
            </view>
            <text class="font">{{
              item.risk ? item.results[1] : item.results[0]
              }}</text>
          </view>
        </view>
      </Loader>
    </view>
    <button class="next-button self-center" hover-class="next-button-hover self-center" @click="toNextPage">
      返回主页
    </button>
  </view>
</template>

<script>
import echarts from "../../components/Questionnare/echarts/echarts.vue";
import Loader from "../../../components/Loader/Loader.vue";
import { request } from '@/util/request.js'
import { getCompressor } from '../../util/questionnaire/index.js'
export default {
  components: { echarts, Loader },
  data() {
    return {
      loading: true,
      option: {},
      scResults: {},
    };
  },

  async mounted() {
    // fetch screening results from backend
    try {
      const res = await request({ url: '/survey/get/', data: { type: 'screening' } });
      if (!res || res.statusCode !== 200 || !res.data || !res.data.result) {
        throw "fetch screening result failed";
      }
      // 解压缩后端返回的数据
      const compressed = res.data.result.result;
      const compressor = getCompressor('screening');
      this.scResults = compressor.decompress(compressed);
    } catch (e) {
      console.log(e);
      uni.redirectTo({
        url: "../screening_explain/screening_explain",
      });
      return;
    }
    console.log("get screening results: ", this.scResults);

    this.option = {
      radar: {
        shape: "circle",
        indicator: [
          { name: "认知", max: 2 },
          { name: "运动", max: 2 },
          { name: "活力", max: 2 },
          { name: "视力", max: 2 },
          { name: "听力", max: 2 },
          { name: "心理", max: 2 },
        ],
        axisTick: {
          length: 10,
        },
        splitNumber: 2,
        splitArea: {
          areaStyle: {
            // color: ["#f4ae82", "#fdcaaa", "#ffe2cf"],
            color: ["#ffe2cf", "#fdcaaa"],
            shadowColor: "rgba(0, 0, 0, 0.2)",
            shadowBlur: 10,
          },
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(211, 253, 250, 0.8)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(211, 253, 250, 0.8)",
        },
      },
      series: [
        {
          // name: "个人得分",
          type: "radar",
          data: [
            {
              value: this.scResults.map((item) => {
                return item.risk ? 1 : 2;
              }),
              name: "得分",
              label: {
                show: true,
                position: 'top',
                distance: 8,
                fontWeight: "bold",
                color: "#99434B",
                formatter: function (params) {
                  return params.value === 1 ? "!风险" : "";
                },
              },
            },
          ],
          itemStyle: {
            color: "#f06976",
          },
          lineStyle: {
            color: "#f06976",
          },
          areaStyle: {
            color: "rgba(255, 197, 203, 0.6)",
          },
          // selectedMode: "single",
          // select: {
          //   label: {
          //     show: true,
          //   },
          // },
        },
      ],
    };
    this.loading = false;
  },

  methods: {
    toNextPage() {
      // 切换回test界面
      this.$tabbar.switchTab({
        url: "/pages/test/test",
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="css">
.mt-7 {
  margin-top: 14rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.ml-7 {
  margin-left: 14rpx;
}

.font {
  font-size: 32rpx;
  color: #000000;
}

.group {
  padding: 24rpx 33rpx 0;
}

.section_card {
  padding: 16rpx 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
}

.icon_explain {
  width: 48rpx;
  height: 48rpx;
}

.list {
  border-radius: 24rpx;
}

.list-item:first-child {
  margin-top: 0;
}

.image_9 {
  width: 56rpx;
  height: 56rpx;
}

.font_explain {
  font-size: 30rpx;
  font-weight: 700;
  color: #000000;
}

.next-button {
  width: 680rpx;
  margin-top: 30rpx;
  border-radius: 24rpx;
  background-color: #f26a77;
  color: #ffffff;
}

.next-button-hover {
  width: 342px;
  margin-top: 30rpx;
  border-radius: 24rpx;
  background-color: #ffc5cb;
  color: #ffffff;
}
</style>